<template>
  <div class="columns">
    <div class="column is-half is-offset-one-quarter" >
      <el-card>
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="🏷️账号登录" name="first">
          <el-form
              v-loading="ruleForm.loading"
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm">
            <el-form-item label="👨‍💻用户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="🔑密码" prop="pass">
              <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="submit" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
              <a style="margin-left: 50%;" @click="form.dialogFormVisible = true">忘记密码？</a>
              <router-link style="margin-left: 5%;"  :to="{path:'/register'}">点我注册</router-link>
            </el-form-item>
          </el-form>
          <el-dialog :title="form.title" :visible.sync="form.dialogFormVisible">
            <el-form :model="form" v-show="form.isShow"  :rules="rules" ref="form1">
              <el-form-item label="✉️邮箱" :label-width="form.formLabelWidth"  prop="email">
                <el-input v-model="form.email" autocomplete="off" class="m_input"></el-input>
                <el-button  class="m_btn" @click="mail(form,'form1',1)" :disabled="form.disabled">{{form.msg}}</el-button>
              </el-form-item>
              <el-form-item label="👨‍💻用户名" :label-width="form.formLabelWidth"  prop="name">
                <el-input v-model="form.name" autocomplete="off" class="m_input"></el-input>
              </el-form-item>
              <el-form-item label="🔑验证码" :label-width="form.formLabelWidth">
                <el-input v-model="form.code" autocomplete="off" class="m_input"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="queren1(form)" class="footer">确 定</el-button>
              </el-form-item>
            </el-form>
            <el-form :model="form" v-show="!form.isShow"  :rules="rules" ref="form2">
              <el-form-item label="🔑密码" :label-width="form.formLabelWidth"  prop="pass">
                <el-input v-model="form.pass" autocomplete="off" class="m_input"></el-input>
              </el-form-item>
              <el-form-item label="🔑确认密码" :label-width="form.formLabelWidth"  prop="checkPass">
                <el-input v-model="form.checkPass" autocomplete="off" class="m_input"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="queren2(form,'form2')" class="footer">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="📱手机号登录" name="second">
          <el-form :model="phone_form" :rules="rules" ref="form3" class="demo-ruleForm" v-loading="phone_form.loading">
            <el-form-item label="📱手机号" :label-width="phone_form.formLabelWidth"  prop="phone">
              <el-input  v-model="phone_form.phone" autocomplete="off" class="e_input"></el-input>
              <el-button class="e_btn" @click="phone(phone_form,'form3')" :disabled="phone_form.disabled">{{phone_form.msg}}</el-button>
            </el-form-item>
            <el-form-item  label="🔑验证码" :label-width="phone_form.formLabelWidth">
              <el-input v-model="phone_form.code" autocomplete="off" class="e_input"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="panduan(phone_form)" class="e_footer">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="✉️邮箱登录" name="third">
          <el-form :model="email_form" :rules="rules" ref="form4" class="demo-ruleForm" v-loading="email_form.loading">
            <el-form-item label="✉️邮箱" :label-width="email_form.formLabelWidth"  prop="email">
              <el-input v-model="email_form.email" autocomplete="off" class="e_input"></el-input>
              <el-button class="e_btn" @click="mail(email_form,'form4',2)" :disabled="email_form.disabled">{{email_form.msg}}</el-button>
            </el-form-item>
            <el-form-item label="🔑验证码" :label-width="email_form.formLabelWidth">
              <el-input v-model="email_form.code" autocomplete="off" class="e_input"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="panduan(email_form)" class="e_footer">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import {loginByEmailAndPhone, mail_v, sendMail, sendPhone, updatePass} from "../../api/user";

export default {
  name: "Login",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      activeName:'first',
      redirect: undefined,
      //账号登录表单
      ruleForm: {
        name: "",
        pass: "",
        rememberMe: true,
        loading:false,
      },
      rules: {
        name: [
          { required: true, message: "请输入你的用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在6到12个字符之间",
            trigger: "blur",
          },
        ],
        phone:[
          { required: true, message: '请输入你的手机号' ,trigger: 'blur' },
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'}
        ],
        pass: [
          { required: true, message: "请输入你的密码", trigger: "blur" },
          {min: 6, max: 20, message: "长度在6到20个字符之间", trigger: "blur"},
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        email:[
              { required: true, message: '请输入你的邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      },
      //邮箱更改密码表单
      form:{
        name:'',
        name2:'',
        email:'',
        code:'',
        pass:'',
        checkPass:'',
        msg:"发送验证码",
        title:"使用邮箱验证",
        daojishi:60,
        time:'',
        msg2:'',
        isShow:true,
        disabled:false,
        formLabelWidth: '120px',
        dialogFormVisible:false
      },
      phone_form:{
        name2:'',
        phone:'',
        code:'',
        msg:"发送验证码",
        daojishi:60,
        time:'',
        disabled:false,
        formLabelWidth: '120px',
        loading:false
      },
      //邮箱登录表单
      email_form:{
        id:"",
        name:'',
        email:'',
        code:'',
        msg:"发送验证码",
        title:"使用邮箱验证",
        daojishi:60,
        time:'',
        msg2:'',
        disabled:false,
        formLabelWidth: '120px',
        loading:false
      }
    };
  },
  methods: {
    //账号登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.toLogin(this.ruleForm,"user/login",this.ruleForm)
        } else {
          return false;
        }
      });
    },
    //发送邮箱
    mail(form, formName,num) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.disabled = true
          this.daojishi1(form)
          sendMail(form.email, form.name,num).then((res) => {
            console.log(res)
            form.name2=res.data
            form.msg2 = form.name2+"mail"+num
            this.$message.success(res.message)
          }).catch(() => {
            clearInterval(form.time)
            this.chongzhi(form)
          })
        } else return false
      })
    },
    phone(form,formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.disabled = true
          this.daojishi1(form)
          sendPhone(form.phone).then((res) => {
            form.name2=res.data
            form.msg2=res.data+"phone"
            this.$message.success(res.message)
          }).catch(() => {
            clearInterval(form.time)
            this.chongzhi(form)
          })
        }
        else return false
      })
    },
    //按钮倒计时
    daojishi1(form) {
      form.time = setInterval(() => {
        form.daojishi--
        form.msg = form.daojishi + "秒后再获取"
        if (form.daojishi === 0) {
          this.chongzhi(form)
          clearInterval(form.time)
        }
      }, 1000)
    },
    //判断邮箱验证码是否正确，正确则可更改密码
    queren1(form) {
      if (form.code === "") {
        this.$message("请输入验证码")
      } else {
        console.log(form.msg2)
        mail_v(form.msg2, form.code).then((res) => {
          console.log(res)
          this.$message.success(res.message)
          form.title = "更改密码"
          form.isShow = false
        }).catch(() => {
        })
      }
    },
    //确认两次密码输入一致，一致则更改密码成功
    queren2(form,formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatePass(form.pass, form.name2).then((res) => {
            this.ruleForm.name = form.name2
            form.isShow = true
            form.dialogFormVisible = false
            this.$message.success(res.message)
          })
        }
      })
    },
    //判断验证码是否正确，正确则登录成功
    panduan(form){
      if(form.code===""){
        this.$message("请输入验证码")
      }
      else {
        console.log(form.msg2, form.code,form.name2)
        loginByEmailAndPhone(form.msg2, form.code,form.name2).then((res) => {
          this.toLogin(form,"user/mailAndPhone",res)
        })
      }
    },
    chongzhi(form) {
      form.daojishi = 60
      form.msg = "发送验证码"
      form.disabled = false
    },
    //前往登录
    toLogin(form,type,res){
      form.loading = true;
      this.$store
          .dispatch(type, res)
          .then(() => {
            this.$message({
              message: "登录成功~",
              type: "success",
              duration: 2000,
            });
            setTimeout(() => {
              form.loading = false;
              this.$router.push({path: this.redirect || "/"});
            }, 0.1 * 1000);
          })
          .catch(() => {
            form.loading = false;
          });
    },
  }
};
</script>

<style scoped>
.submit{
  width: 80%;
}
.el-input{
  width: 80%;
}
.el-card{
  margin-top: 10%;
  background:white;
}
.el-form{
  margin-top: 5%;
}
.footer{
  background:#409EFF;
  color: white;
  width:51%;
  margin-left: 16.5%;
}
.e_footer{
  margin-left:24.5%;
  width:45.5%;
  background:#409EFF;
  color: white;
}
.e_input,.m_input{
  width:60%
}
.e_btn,.m_btn{
  margin-left: 3%;
  background:#409EFF;
  color: white;
}
</style>
